<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="学生姓名">
      <el-select v-model="form.quitId" filterable placeholder="请选择" style="width: 100%;">
        <el-option
          v-for="item in quitClassData"
          :key="item.quitId"
          :label="item.userName+'-'+item.nickName+'-'+item.originalClass"
          :value="item.quitId"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="费用类型" :label-width="formLabelWidth" prop="chargeTypeId">
          <el-cascader
            placeholder="请选择费用类型"
            v-model="form.chargeTypeId"
            :options="typeTree"
            :props="{ checkStrictly: true,value:'chargeTypeId',label:'typeName',emitPath:false }"
            filterable
            resize
            clearable
            style="width: 100%;"
          ></el-cascader>
        </el-form-item>
    <el-form-item label="原有班级">
      <el-select v-model="form.originalClass" filterable placeholder="请选择" style="width: 100%;">
        <el-option
          v-for="item in classAllData"
          :key="item.classId"
          :label="item.termName+'-'+item.typeName+'-'+item.className"
          :value="item.termName+'-'+item.typeName+'-'+item.className"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="退费金额">
      <el-select v-model="form.sumMoney" filterable placeholder="请选择" style="width: 100%;">
        <el-option
          v-for="item in termClassPriceData"
          :key="item.termClassPriceId"
          :label="item.termName+'-'+item.className+'-￥'+item.price+'.00 元'"
          :value="item.price"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="缴费状态" >
          <el-select
            filterable
            v-model="form.returnStatus"
            placeholder="请选择状态"
            :width="formLabelWidth"
            resize
            class="setDialogDateAndSex"
            clearable
            style="width: 100%;"
          >
            <el-option
              v-for="(item,index) in optionStatus"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
              <i :class="item.icon">{{item.label}}</i>
            </el-option>
          </el-select>
        </el-form-item>
    <el-form-item label="信息备注">
      <el-input
        type="textarea"
        v-model="form.comment"
        maxlength="255"
        show-word-limit
        resize
        clearable
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleAdd">立即创建</el-button>
      <el-button @click="goBack">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data () {
    return {
      quitClassData: [], // 退班状态已退班的学生信息
      termClassPriceData: [], // 所有学期班级价格信息
      typeTree: [],
      classAllData: [],
      form: {
        quitId: '',
        chargeTypeId: '',
        originalClass: '',
        returnStatus: '',
        sumMoney: '',
        comment: ''
      },
      optionStatus: [
        {
          value: '已退费',
          label: '已退费',
          icon: 'el-icon-success'
        },
        {
          value: '未退费',
          label: '未退费',
          icon: 'el-icon-error'
        }
      ]
    }
  },
  created () {
    this.getQuitClassInfo()
    this.getTermClassPriceInfo()
    this.getTypeTree()
    this.getAllClassData()
  },
  methods: {
    getAllClassData () {
      // 获取班级信息
      this.$axios
        .get('/studentClass/getAllClass')
        .then(response => (this.classAllData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    getTypeTree () {
      // 取得学期名称数据
      this.$axios
        .get('chargeTypes/trees')
        // .then(response => (this.tableData = response.data.data[0].tuition))
        .then(response => {
          this.typeTree = this.getTreeData(response.data.data)
          console.log(response.data.data)
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    getTreeData (data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children)
        }
      }
      return data
    },
    goBack () {
      // 点击跳转至上次浏览页面
      this.$router.replace('/returnClassTuition')
    },
    handleAdd: function () {
      // 执行添加请假信息方法
    //   alert(JSON.stringify(this.form))
      if (this.form != null) {
        this.$axios
          .post('/returns', {
            json: this.form
          })
          .then(response => {
            if (response.data.code === 200) {
              // alert(JSON.stringify(response.data));
              setTimeout(() => {
                // var obj = JSON.parse(JSON.stringify(response.data.data))
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.initInsert()
                this.getQuitClassInfo()
              }, 300)
            } else {
              this.$message({
                message: '添加失败',
                type: 'warning'
              })
            }
          })
          .catch(function (error) {
            // 请求失败处理
            console.log(error)
          })
      }
    },
    initInsert () {
      this.form.quitId = ''
      this.form.chargeTypeId = ''
      this.form.originalClass = ''
      this.form.sumMoney = ''
      this.form.comment = ''
    },
    getQuitClassInfo () {
      // 获取学生退班状态已批阅的信息
      this.$axios
        .get('/returns/studentAndQuitClass')
        .then(response => (this.quitClassData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    getTermClassPriceInfo () {
      // 获取学期班级价格信息
      this.$axios
        .get('/termClassPrices/termClassPriceInfos')
        .then(response => (this.termClassPriceData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    }
  }
}
</script>
